<template>
  <div class="lable-top">
    <el-form label-position="top" size="small">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-form-item label="终端">
            <el-select value="">
              <el-option label="1" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label=" " />
        </el-col>
        <el-col :span="10">
          <el-form-item label="终端">
            <el-select v-permission="['super']" value="">
              <el-option label="1" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label=" ">
            <el-button class="ml5">链接</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form label-position="top" size="small">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item>
            目录：
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item>
            <el-input />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button class="ml5">访问</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form label-position="top" size="small">
      <el-row :gutter="10">
        <el-col :span="6">
          <file-path />
        </el-col>
        <el-col :span="18">
          <el-table
            border
            :data="tableData"
            :header-cell-style="{ background: '#f5f5f5' }"
            height="400"
            size="mini"
          >
            <el-table-column label="名称" />
            <el-table-column label="类型" />
            <el-table-column label="创建时间" />
            <el-table-column label="修改时间" />
            <el-table-column label="动作">
              <template>
                <el-button type="text">
                  提取
                </el-button>
                <el-button type="text">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <json-viewer
            boxed
            class="mt10"
            copyable
            :expand-depth="1"
            expanded
            preview-mode
            sort
            :value="jsonData"
          />
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import FilePath from "@/views/response/componetns/filePath/filePath";
import JsonViewer from "vue-json-viewer";
export default {
  name: "RemoteFile",
  components: { FilePath, JsonViewer },
  data: () => {
    return {
      tableData: [],
      jsonData: {
        type: "file",
        file_name: "病毒.exe",
        file_full_path: "C:\\Users\\Administrator\\病毒.exe",
        file_size: "106k",
        create_time: 0,
        modify_time: 0
      }
    };
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-button {
  width: 100%;
}
::v-deep .jv-container .jv-code.boxed {
  max-height: 50px;
  overflow: auto;
}
</style>
